<template>
	<view class="container">
		<view class="form-content">
			<u-input v-model.trim="form.mobile" clearable placeholder="请输入您的新手机号" shape="circle" border="none" fontSize="32rpx"
				:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx'}">
				<template slot="suffix">
					<view class="code-text" :class="[form.mobile.trim()?'hasTime':'']" @tap="getPhoneCode">
						{{countdownTime>0?countdownTime+'S':'获取验证码'}}
					</view>
				</template>
			</u-input>

			<u--input v-model.trim="form.captcha" clearable placeholder="短信验证码" shape="circle" border="none" fontSize="32rpx"
				:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}"></u--input>

			<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle" :disabled="!(form.mobile&&form.captcha)"
				@click="changePhoneSubmit">立即绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					captcha: ''
				},
				// 倒计时秒数
				countdownTime: 0,
				intervalId: null,
				customButtonStyle: {
					width: '100%',
					height: '76rpx',
					fontSize: '32rpx',
					color: '#FFFFFF',
					marginTop: '40rpx',
				}
			}
		},
		methods: {
			// 获取短信验证码
			getPhoneCode() {
				if (!this.form.mobile.trim()) {
					return
				}
				// 检查是否60秒内已经请求过
				if (this.countdownTime > 0) {
					return;
				}
				if(!this.$util.businessUtil.checkPhoneBool(this.form.mobile)){
					return
				}
				this.$api.gate_sms_send({
					mobile: this.form.mobile,
					event: 'changemobile'
				}).then(res => {
					// 发送验证码
					uni.showToast({
						title: "验证码已发送",
						icon: "none",
						duration: 2000
					})
					// 倒计时60秒
					this.countdownTime = 60
					this.intervalId = setInterval(() => {
						if (this.countdownTime <= 0) {
							clearInterval(this.intervalId)
						}
						this.countdownTime -= 1;
					}, 1000)
				})
			},

			//提交修改
			changePhoneSubmit() {
				if(!this.$util.businessUtil.checkPhoneBool(this.form.mobile)){
					return
				}
				this.$api.gate_user_changemobile(this.form).then(res => {
					this.$showToast("修改成功")
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 96rpx 36rpx;
	}

	.form-content {
		padding: 42rpx 0 196rpx;

		.icon-eye {
			width: 34rpx;
			height: 34rpx;
			display: block;
		}

		.code-text {
			font-weight: 400;
			font-size: 32rpx;
			color: #C1C2C3;
			padding-left: 18rpx;
			position: relative;

			&.hasTime {
				color: #FFC046;
			}

			&::before {
				content: '';
				width: 1px;
				height: 30rpx;
				background-color: #979797;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.agreement-text {
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			margin-top: 18rpx;

			.link {
				color: #999999;
				text-decoration: underline;
			}
		}
	}
</style>